<template>
    <div class="login-container">
        <video class="video" autoplay="autoplay" loop="loop" width="1920px" src="../../assets/video/video.mp4"></video>
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
            class="demo-loginForm">
            <i :class="['iconfont', 'jiaobiao', jiaobiao]"></i>
            <h1 class="title">千锋管理系统</h1>
            <!-- 一开始是二维码角标,点击之后变成电脑角标,再次点击又切换 -->
            <!-- 切换二维码登入的控制条件isErweiLogin -->

            <!-- 常规登录 -->
            <CommonLogin @syncLoginForm="handleSyncLoginForm" @submit="submit" @reset="reset" />

            <!-- 二维码登录 -->
            <!-- <QrCodeLogin /> -->

            <!-- 手机短信登录 -->
            <!-- <SmsLogin /> -->
        </el-form>
    </div>
</template>

<script>
import CommonLogin from './CommonLogin.vue';
import QrCodeLogin from './QrCodeLogin.vue';
import SmsLogin from './SmsLogin.vue';
// 定义三个校验函数
// 校验验证码
var validateCaptcha = (rule, value, callback) => {
    //callback只要传参了,表示表单验证不通过,不传参表示表单验证通过
    //value就是在input中的输入值
    //rule是个对象,就是验证对象
    if (value.length !== 5) {
        callback("验证码必须是5位字符")
    } else {
        callback()
    }
};

// 校验用户名
var validateUsername = (rule, value, callback) => {
    // 由数字字母下划线组成的4-16位字符
    var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
    // 如果校验通过，则回调callback()
    if (uPattern.test(value)) {
        callback()
    } else {
        callback("用户名必须由数字字母下划线组成的4-16位字符")
    }

};

// 校验密码
var validatePassword = (rule, value, callback) => {
    if (value == "") {
        callback("密码最少为3位字符")
    } else if (value.length < 3) {
        callback("请输入密码")
    } else {
        callback()
    }
};

export default {
    data() {
        return {
            isQrcodeLogin: false, //是否是二维码登入
            loginForm: {
                userName: "",
                password: "",
                age: ""
            },
            rules: {
                // 表单验证规则
                userName: [
                    { validator: validateUsername, trigger: "blur" }
                ],
                password: [
                    { validator: validatePassword, trigger: "blur" }
                ],
                age: [
                    { validator: validateCaptcha, trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        handleSyncLoginForm(newLoginForm) {
            // console.log(newLoginForm);
            this.loginForm = newLoginForm
        },

        // 表单校验
        submit() {
            this.$refs['loginForm'].validate((valid) => {
                // 本地校验通过
                if (valid) {
                    alert("submit!");
                } else {// 本地校验不通过
                    console.log("error submit!!");
                    return false;
                }
            });
            // console.log("123---", this.$refs);
        },
        reset(formName) {
            // this.$refs[formName].resetFields();
            this.$refs=""
        }
    },

    // 计算属性
    computed: {
        jiaobiao() {
            return this.isQrcodeLogin
                ? "icon-diannao"
                : "icon-erweima";
        }
    },
    components: { CommonLogin, QrCodeLogin, SmsLogin }
}
</script>

<style lang="less" scoped>
.login-container {
    text-align: center;
    color: #fff;

    video {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    i.iconfont {
        display: block;
        font-size: 80px;
        position: absolute;
        top: 0;
        right: 0;
        color: rgb(90, 78, 66);
        cursor: pointer;
    }

    h1 {
        color: rgb(242, 102, 26);
        font: 30px/34px "楷体";
        margin-top: 30px;
    }

    .el-form {
        background: rgba(243, 241, 241, 0.8);
        position: fixed;
        right: 65%;
        top: 10%;
        border-radius: 5px;
        width: 350px;
        padding: 37px;
    }
}
</style>